<extend name="./Application/Admin/View/Layout/application.html"/>

<block name="content">
    <div class="row">
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">友情链接</h3>
                </div>
                <div class="panel-body">
                    <form action="" method="post" id="form">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" class="check_all">
                                </th>
                                <th>编号</th>
                                <th>名称</th>
                                <th>网址</th>
                                <th>排序</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>

                            <volist name="links" id="link">
                                <tr data-id="{{$link.id}}">
                                    <th>
                                        <input type="checkbox" name="ids[]" value="{{$link.id}}" class="checked_id">
                                    </th>
                                    <th scope="row">{{$link.id}}</th>
                                    <td class="name">{{$link.name}}</td>
                                    <td class="url"><a href="{{$link.url}}" target="_blank">{{$link.url}}</a></td>
                                    <td>
                                        <input type="hidden" name="id[]" value="{{$link.id}}">
                                        <input type="text" name="sort_order[]" value="{{$link.sort_order}}">
                                    </td>
                                    <td>

                                        <a href="javascript: void 0;" class="edit" data-toggle="modal"
                                           data-target="#editLink">
                                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                        </a>

                                        <a href="javascript: void 0;" class="delete" data-toggle="modal"
                                           data-target="#deleteLink">
                                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                        </a>
                                    </td>
                                </tr>
                            </volist>

                            </tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="list-group">
                <a href="javascript: void 0;" class="list-group-item list-group-item-info" data-toggle="modal"
                   data-target="#addLink">
                    新增
                </a>

                <a href="javascript: void 0;" id="delete_all" class="list-group-item list-group-item-warning">
                    删除
                </a>

                <a href="javascript: void 0;" id="sort_order" class="list-group-item list-group-item-success">排序</a>
            </div>
        </div>
    </div>


    <!-- 新增Modal -->
    <div class="modal fade" id="addLink" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <form class="form-horizontal">

                <div class="modal-content panel panel-default">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">新增友情链接</h4>
                    </div>

                    <div class="modal-body">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" id="name" placeholder="请输入友情链接的名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="url" class="col-sm-2 control-label">网址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="url" id="url" placeholder="请输入友情链接的网址">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button>
                        <button type="submit" class="btn btn-primary add_link">保 存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 编辑Modal -->
    <div class="modal fade" id="editLink" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <form class="form-horizontal">
                <input type="hidden" name="id" id="edit_id">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="">编辑友情链接</h4>
                    </div>

                    <div class="modal-body">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" id="edit_name"
                                       placeholder="请输入友情链接的名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="url" class="col-sm-2 control-label">网址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="url" id="edit_url"
                                       placeholder="请输入友情链接的网址">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button>
                        <button type="submit" class="btn btn-primary update_link">保 存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!--删除-->
    <div class="modal fade" id="deleteLink" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <input type="hidden" id="del_id">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="ModalLabel">删除友情链接</h4>
                </div>

                <div class="modal-body">
                    <p>确认要删除当前友情链接吗？</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <a type="submit" class="btn btn-danger delete_confirm">确 认</a>
                </div>
            </div>
        </div>
    </div>
</block>

<block name="js">
    <!--<script src="__PUBLIC__/assets/admin/js/link.js"></script>-->
    <script>
        $(function () {
            //ajax新增
            $('.add_link').click(function () {
                var info = {
                    name: $("#name").val(),
                    url: $("#url").val()
                }

//                console.log(info);

                $.post("{{:U('ajax_add')}}", info, function (data) {
                    var html = '<tr data-id="' + data.info.id + '">' +
                        '<th>' +
                        '<input type="checkbox" name="ids[]" value="' + data.info.id + '" class="checked_id">' +
                        '</th>' +
                        '<th scope="row">' + data.info.id + '</th>' +
                        '<td class="name">' + info.name + '</td>' +
                        '<td class="url"><a href="' + info.url + '" target="_blank">' + info.url + '</a></td>' +
                        '<td>' +
                        //                        '<input type="hidden" name="id[]" value="{{$link.id}}">' +
                        '<input type="text" name="sort_order[]" value="99">' +
                        '</td>' +
                        '<td>' +
                        '' +
                        '<a href="javascript: void 0;" class="edit" data-toggle="modal"' +
                        'data-target="#editLink">' +
                        '<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>' +
                        '</a>' +
                        '' +
                        '<a href="javascript: void 0;" class="delete">' +
                        '<span class="glyphicon glyphicon-trash" data-toggle="modal"' +
                        'data-target="#deleteLink" aria-hidden="true"></span>' +
                        '</a>' +
                        '</td>' +
                        '</tr>';

                    $(html).appendTo('tbody');

                    //清空表单值
                    $("#name").val('');
                    $("#url").val('');

                    //关闭模态框
                    $("#addLink").modal("hide");
                })
                return false;
            })

            //ajax编辑
            $('.edit').click(function () {
                //获取表单原有的值
                var id = $(this).parents('tr').data('id');
                var name = $(this).parent().siblings('.name').text();
                var url = $(this).parent().siblings('.url').text();

                //设置数据库原有的值
                $("#edit_id").val(id);
                $("#edit_name").val(name);
                $("#edit_url").val(url);
            })

            $('.update_link').click(function () {
                var info = {
                    id: $("#edit_id").val(),
                    name: $("#edit_name").val(),
                    url: $("#edit_url").val()
                }
//                console.log(info);

                $.post("{{:U('ajax_update')}}", info, function () {
                    window.location.reload();
                })

                return false;
            })

            //ajax删除单条
            $('.delete').click(function () {
                var id = $(this).parents('tr').data('id');
                $("#del_id").val(id);
            })


            //删除加上给动态添加的元素绑定事件
            $('.delete_confirm').click(function () {
                var id = $("#del_id").val();
                $.post("{{:U('delete_one')}}", {id: id}, function () {
                    $("tr[data-id='" + id + "']").fadeOut(400);
                })

                //关闭模态框
                $("#deleteLink").modal("hide");
                return false;
            })

            //全选、反选
            $(".check_all").click(function () {
                var checked = $(this).prop('checked');
                $(".checked_id").prop('checked', checked);
            })

            //ajax删除多条
            $('#delete_all').click(function () {
                var length = $('.checked_id:checked').length;
                if (length == 0) {
                    alert('您至少要选中一条记录');
                    return false;
                }

                $.post("{{:U('del_all')}}", $('.checked_id:checked').serialize(), function () {

                    $(".checked_id:checked").each(function () {
                        $(this).parents('tr').fadeOut(400);
                    })

                })

                return false;
            })


            //ajax排序
            $('.sort_order').change(function () {
                //思想：获取要修改的记录的id和修改后的值，然后发ajax请求到后端，后端执行数据库修改操作。

                return false;
            })

            //删除的另外一种弹出框
//            $('.delete').click(function () {
//                if (confirm('您确定要删除此条记录吗?')) {
//
//                }
//            })

        })
    </script>
</block>


